<template>
	<div ref="chartRef" style="width: 100%; height: 300px;"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
let chartInstance = null

const initChart = () => {
	if (!chartRef.value) return
	chartInstance = echarts.init(chartRef.value)
	const option = {
		tooltip: { trigger: 'axis' },
		xAxis: {
			type: 'category',
			data: ['光刻胶', '蚀刻液', '清洗剂', '抛光液', '去胶剂']
		},
		yAxis: { type: 'value' },
		series: [{
			name: '库存数量',
			type: 'bar',
			data: [1200, 800, 600, 400, 200],
			barWidth: '50%'
		}]
	}
	chartInstance.setOption(option)
}

onMounted(() => {
	initChart()
	window.addEventListener('resize', () => chartInstance?.resize())
})

onBeforeUnmount(() => {
	window.removeEventListener('resize', () => chartInstance?.resize())
	chartInstance?.dispose()
})
</script>
  
